<!--
  描述：根据大学查专业并添加备选库
  使用1：<major :collegeId="2011" :type="all"></major>(直接在元素上传参)
  使用2：<major ref="contentMajor"></major>
        this.$refs.contentMajor.init(collegeId, type)
  参数1：collegeId（大学编号，必传）
  参数2：type（all 或者不传为全部专业   my 适合我的， select 已选择）
-->
<template>
  <div>
    <div class="content-major" v-if="list.length>0">
      <ul class="flex-row line" v-for="(item,index) in list" :key="index">
        <li>
          <block type="probability" :data="{id:item.chongShouBao.id,name:item.chongShouBao.name,probability:item.probability}"></block>
        </li>
        <li class="flex" style="width:0">
          <block type="major" :data="{name:item.name,list:[item.yearOfStudy,item.grade],tuition:item.price}"></block>
        </li>
        <li>
          <block type="plan" :data="{year:item.year,plan:item.planCount,list:item.enrollMajorScoreLines}"></block>
        </li>
        <li class="pl20 pr5 flex-row--c">
          <div
            class="block-btn--add"
            :class="item.choose && 'active'"
            @click="add(item);item.choose=!item.choose">
              {{item.choose?'已添加备选库':'添加至备选库'}}
            </div>
        </li>
      </ul>
      <paginate v-if="totalElements>15" :total="totalElements" :current-page="page" @pagechange="pagechange"></paginate>
    </div>
    <no-content v-else :text="text"></no-content>
  </div>
</template>
<script type="text/javascript">
import { api } from '@/utils'
import _ from 'lodash'
export default {
  data () {
    return {
      list: [],
      totalElements: 0,
      page: 1,
      text: '加载中...',
      params: {
        collegeId: '',
        page: 0,
        size: 15,
        type: 'all'
      }
    }
  },
  props: ['collegeId', 'type'],
  created () {
    if (this.collegeId) {
      this.init(this.collegeId, this.type)
    }
  },
  methods: {
    init (id = '', type = 'all') {
      this.params.collegeId = id
      this.params.type = type
      this.reset()
      this.getData()
    },
    getData () {
      this.$axios.get(api.queryFirstCollegeMajor, { params: this.params }).then(data => {
        if (!_.isEmpty(data)) {
          if (data.content.length > 0) {
            this.list = data.content

            this.totalElements = data.totalElements
          } else {
            this.text = '暂无数据'
          }
        } else {
          if (this.params.type === 'my') {
            // console.log('点击适合我的，没有数据，去做霍兰德测评')
            // this.$router.push({
            //   path: './holland-entry'
            // })
          }
          this.text = '暂无数据'
          this.reset()
        }
      }).catch(err => {
        console.log(err)
        this.text = '网络走丢了，请稍后重试！'
      })
    },
    // 添加或取消添加备选库
    add (item) {
      let params = {
        collegeId: this.params.collegeId,
        studentPlansId: item.id
      }
      this.$axios.post(api.setFirstCollegeMajor, params).then(data => {
        console.log('添加/删除专业')
      }).catch(data => {
        // this.$toast('网络走丢了，请稍后重试！')
        this.getData()
      })
    },
    pagechange (index) {
      this.params.page = index - 1
      this.page = index
      this.getData()
    },
    reset () {
      this.params.page = 0
      this.list = []
      this.totalElements = 0
      this.page = 1
    }
  }
}
</script>
<style lang="scss" scoped>
  /deep/ .block-major{
    padding-right:0px !important;
  }
  // /deep/ .el-tabs__nav-scroll{
  //   padding:0 !important;
  // }
  // /deep/ .block-probability{
  //   padding-right:40px;
  // }
</style>

